<template>
  <div @click="fatherFn">
    <!-- 
      v-on修饰符
      作用：给事件增加更加强大的功能
      常用的修饰符
        .stop     阻止事件冒泡
        .prevent  阻止默认行为
        .once     程序运行期间，只触发一次事件处理函数
      语法：
        @事件名.修饰符="methods中的函数名"
     -->
    <button @click.stop="stopFn" >.stop阻止事件冒泡</button>
    <a @click.prevent href="http://www.baidu.com">prevent 阻止跳转百度</a>
    <!-- 即要阻止事件冒泡又要阻止默认行为，写法如下 -->
    <a @click.prevent.stop href="http://www.baidu.com">prevent 阻止跳转百度</a>
    <button @click.once="onceFn">once 程序运行期间，只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("父元素触发了！！！");
    },
    stopFn(){
      console.log("stop 触发了！");
    },
    onceFn(){
      console.log("我只会被触发一次");
    }
  }
}
</script>

<style>

</style>